<template>
  <div id="app">
    <el-dialog :visible.sync="recordDialog"
               width="50%"
               center
               title="监理验收记录表"
    >

      <el-table :data="recordData" max-height="700px" :cell-style="{ 'textAlign': 'center' }"
                :header-cell-style="{'textAlign': 'center' }">
        <el-table-column prop="evaluateId" label="ID" width="80px"></el-table-column>
        <el-table-column prop="assignName" label="订单名称"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="submitDate" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link style="color: #66b1ff;margin-right: 10px" @click="checkDetail(scope.row)">查看</el-link>
            <el-link style="color: red">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button style="color: #FFFFFF" @click="recordDialog=false">关 闭</el-button>
      </span>
      <el-dialog :visible.sync="detailDialog"
                 width="60%"
                 append-to-body
      >
        <div style="width: 100%;height: 100%;display: flex;justify-content: center">
          <div style="padding-right: 50px;max-height: 600px;overflow: scroll">
            <!--          基础信息-->
            <div class="title"><span></span>
              <p>基础信息</p></div>
            <div class="top">
              <p>订单名称：{{ detailData.assignName }}</p>
              <p>工程专员：{{ detailData.chargeUserName }}</p>
              <p> 验收日期：{{ detailData.acceptanceDate }} </p>
            </div>
            <div class="top">
              <p>装修公司：{{ detailData.companyName }}</p>
              <p>装修负责人：{{ detailData.projectUserName }}</p>
              <p>装修完工日期：{{ detailData.decorationStartDate }}</p>
            </div>
            <div class="top">
              <p>货架公司：{{ detailData.goodsCompanyName }}</p>
              <p>监控公司：{{ detailData.monitorCompanyName }}</p>
              <p>冷链公司：{{ detailData.coldCompanyName }}</p>
            </div>
            <div class="top">
            </div>
            <!--隐藏验收模板-->
            <div class="title" style="margin-top: 20px"><span></span>
              <p>装饰验收模块</p></div>
            <el-table :data="detailData.concealedEvaluateList" style="width: 90%;margin-left: 50px;margin-top: 10px"
                      border stripe :cell-style="{ 'textAlign': 'center' }"
                      :header-cell-style="{ 'background-color': '#303e9d', 'color': 'white', 'textAlign': 'center' }">
              <el-table-column prop="taskId" label="Id"></el-table-column>
              <el-table-column prop="concealedName" label="任务名"></el-table-column>
              <el-table-column prop="concealedRemark" label="验收结果"></el-table-column>
              <el-table-column prop="concealedScorePicture" label="验收图片">
                <template slot-scope="scope">
                  <el-image style="width: 50px;height: 50px" v-for="item in scope.row.concealedScorePicture"
                            :src="'https://'+item" :key="item" :preview-src-list="['https://'+item]"></el-image>
                </template>
              </el-table-column>
            </el-table>
            <!--装饰验收模板-->
<!--            <el-table-->
<!--                border stripe :cell-style="{ 'textAlign': 'center' }"-->
<!--                :header-cell-style="{ 'background-color': '#303e9d', 'color': 'white', 'textAlign': 'center' }">-->
<!--              <el-table-column prop="taskId" label="Id"></el-table-column>-->
<!--              <el-table-column prop="concealedName" label="任务名"></el-table-column>-->
<!--              <el-table-column prop="concealedRemark" label="验收结果"></el-table-column>-->
<!--              <el-table-column prop="concealedScorePicture" label="验收图片">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image style="width: 50px;height: 50px" v-for="item in scope.row.concealedScorePicture"-->
<!--                            :src="'https://'+item" :key="item" :preview-src-list="['https://'+item]"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
            <!--货架验收模板-->
<!--            <div class="title" style="margin-top: 20px"><span></span>-->
<!--              <p>装饰验收模块</p></div>-->
<!--            <el-table :data="detailData.concealedEvaluateList" style="width: 90%;margin-left: 50px;margin-top: 10px"-->
<!--                      border stripe :cell-style="{ 'textAlign': 'center' }"-->
<!--                      :header-cell-style="{ 'background-color': '#303e9d', 'color': 'white', 'textAlign': 'center' }">-->
<!--              <el-table-column prop="taskId" label="Id"></el-table-column>-->
<!--              <el-table-column prop="concealedName" label="任务名"></el-table-column>-->
<!--              <el-table-column prop="concealedRemark" label="验收结果"></el-table-column>-->
<!--              <el-table-column prop="concealedScorePicture" label="验收图片">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image style="width: 50px;height: 50px" v-for="(item,index) in scope.row.concealedScorePicture"-->
<!--                            :src="'https://'+item" :key="index" :preview-src-list="['https://'+item]"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--            &lt;!&ndash;监控验收模板&ndash;&gt;-->
<!--            <div class="title" style="margin-top: 20px"><span></span>-->
<!--              <p>装饰验收模块</p></div>-->
<!--            <el-table :data="detailData.concealedEvaluateList" style="width: 90%;margin-left: 50px;margin-top: 10px"-->
<!--                      border stripe :cell-style="{ 'textAlign': 'center' }"-->
<!--                      :header-cell-style="{ 'background-color': '#303e9d', 'color': 'white', 'textAlign': 'center' }">-->
<!--              <el-table-column prop="taskId" label="Id"></el-table-column>-->
<!--              <el-table-column prop="concealedName" label="任务名"></el-table-column>-->
<!--              <el-table-column prop="concealedRemark" label="验收结果"></el-table-column>-->
<!--              <el-table-column prop="concealedScorePicture" label="验收图片">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image style="width: 50px;height: 50px" v-for="item in scope.row.concealedScorePicture"-->
<!--                            :src="'https://'+item" :key="item" :preview-src-list="['https://'+item]"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
            <!--其他-->
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "acceptanceRecord",
  data() {
    return {
      recordDialog: false,
      detailDialog: false,
      detailData: [],
      recordData: [],
    }
  },
  methods: {
    handleOpen(val) {
      this.$api.evaluateGetEvaluateListByTaskId(val).then(res => {
        this.recordData = res.data
      })
      this.recordDialog = true
    },

    checkDetail(row) {
      this.detailDialog = true
      this.$api.evaluateGetEvaluateByEvaluateId({evaluateId: row.evaluateId}).then(res => {
        this.detailData = res
      })
    }
  }
}
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;
  span {
    display: block;
    width: 3px;
    margin-right: 5px;
    height: 20px;
    background-color: #303e9d;
  }
  p {
    font-size: 16px;
  }
}

.top {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  padding-left: 50px;

  p {
    width: 300px;
  }
}
</style>